<template>
  <div class="p_20">
    <!-- <div class="flex justify_content_between">
      <el-button size="small" type="primary"  v-if="isRole(['Role/addRole'])"  @click="add">创建权限</el-button>

    </div> -->
	<div class="flex justify_content_between align_items_center  content-wrapper p_lr_20 m_b_20">
		<div class="flex align_items_center">
			<h2>权限管理</h2>
			<div class="p_l_20">
				<el-button size="small" type="primary"  v-if="isRole(['Role/addRole'])"  @click="add">创建权限</el-button>
			</div>
		</div>
	</div>

    <!-- <el-divider></el-divider> -->

    <!-- -项目列表- -->
		<div class="content-wrapper p_20">
    <el-table :data='tableData' width='100%' border>
      <el-table-column label='创建时间' prop='create_time'>
        <template slot-scope="scope">
          {{scope.row.created_at|format}}
        </template>
      </el-table-column>
      <el-table-column label='权限名' prop='name'></el-table-column>
      <el-table-column label='备注' prop='remark'></el-table-column>
      <el-table-column label='操作' width="260">
        <template slot-scope="scope">
          <el-button size="small"  v-if="isRole(['Role/modifyRole'])" @click="edit(scope.row)">编辑</el-button>
          <el-button size="small"  v-if="isRole(['Role/deleteRole'])" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <page ref="Page" :total="total"></page>
	<editRole ref="editRole"></editRole>
	</div>
  </div>
</template>
<script type="text/javascript">
  import methods from './method'
  import data from './data'
  import editRole from '../edit/edit.vue'

  export default {
    data() {
      return data.init()
    },
    methods: methods,
    mounted() {
      this.getTableData()
    },
	components:{
		editRole
	}
  }
</script>
